<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link href="assets/css/lib/themify-icons.css" rel="stylesheet">
    <link href="assets/css/lib/menubar/sidebar.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/layer-v3.1.1/layer/layer.js"></script>
    <script src="js/demo.js"></script>
    <script src="assets/js/lib/jquery.nanoscroller.min.js"></script>
    <script src="assets/js/lib/menubar/sidebar.js"></script>
    <script src="assets/js/lib/preloader/pace.min.js"></script>
    <script src="assets/js/lib/bootstrap.min.js"></script>
    <script src="assets/js/lib/circle-progress/circle-progress.min.js"></script>
    <script src="assets/js/lib/circle-progress/circle-progress-init.js"></script>
</head>
<script src="assets/js/lib/jquery.min.js"></script>
<script type="text/javascript">
    var teacherdelete = function (){
        var ID=$("#ID").val();
        $.ajax({
            type: 'POST',
            url: '<%=request.getContextPath() %>/TeacherDelete?teacherid="'+ID+'"',
            dataType: 'json',
            data: {},
            contentType: 'application/json;charset=UTF-8',
            success: function(e) {
                if (e.status === "COMMITTED") {
                }
                window.location="<%=request.getContextPath() %>/manage/allTeacher.jsp";
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
            },
        });
    }
    var cancel=function(){
        layer.close(index);
        $("#deleteBox").css("display","none");
    }
    var teachermodify = function (){
        var teacherid=$.trim($("#InputTeacherid").val());
        var teachername=$.trim($("#InputTeachername").val());
        var pwd=$.trim($("#InputTeacherPwd").val());
        var teacherphoto=$.trim($("#InputTeacherPhoto").val());
        var teacherintroduction=$.trim($("#InputTeacherIntroduction").val());
        $.ajax({
            type: 'POST',
            url: '<%=request.getContextPath() %>/CourseModify',
            dataType: 'json',
            data: JSON.stringify({
                teacherid: teacherid,
                teachername: teachername,
                pwd: pwd,
                teacherphoto: teacherphoto,
                teacherintroduction: teacherintroduction,
            }),
            contentType: 'application/json;charset=UTF-8',
            success: function(e) {
                if (e.status === "COMMITTED") {
                    window.alert('已提交执行');
                }
                window.location="<%=request.getContextPath() %>/manage/allCourse.jsp";
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                $("#loginBox").css("display","none");
            },
        });
    }
    var searchcourse=function (){
        var id=$.trim($("#select").val());
        $.ajax({
            url:"<%=request.getContextPath()%>/ShowCourseByClass?id='"+id+"'",
            type:"GET",
            dataType:"json",
            success: function(data) {
                var item=data;
                var html = "";
                for(var i=0;i<item.length;i++){
                    console.log(item[i]);
                    var course=["","9:00-10:30", "13:00-14:30", "15:00-16:30", "18:00-19:30"];
                    var day=["","星期一","星期二","星期三","星期四","星期五","星期六","星期日"];
                    var choice=item[i].span;
                    var weekday=item[i].weekday;
                    var courseid=item[i].course_id;
                    html += '<tr><td id="courseid">' + courseid + '</td><td id="weekday">'
                        + day[weekday]+ '</td><td id="span">'
                        + course[choice]+ '</td></tr>';
                }
                $("#courselist").empty();
                $("#courselist").append(html);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            },
        })
    }
    function getCourseTable() {
        var id=$.trim($("#select").val());
        $.ajax({
            url:"<%=request.getContextPath()%>/ShowClassByTeacher",
            type:"GET",
            dataType:"json",
            success: function(data) {
                //清空课程表
                for(var i=1;i<6;i++){
                    for(var j=1;j<6;j++){
                        $("#table_"+j+"_"+i).html("");
                    }
                }
                var item=data;
                var html = "";
                //遍历课程表
                for (var i=0;i<item.length;i++) {
                    var courses=item[i].courses;
                    var coursename=item[i].class_name;
                    var placename=item[i].place?item[i].place.place_name:"";
                    var course=["","9:00-10:30", "13:00-14:30", "15:00-16:30", "18:00-19:30"];
                    for(var j=0;j<courses.length;j++){
                        $("#table_"+courses[j].weekday+"_"+courses[j].span).html(coursename+"<br>"+placename);
                    }
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            },
        })

    }

    window.onload=function tryapitest(){
        $.ajax({
            url:"<%=request.getContextPath()%>/ShowClassByTeacher",
            type:"GET",
            dataType:"json",
            success: function(data) {
                $.each(data, function(index, item) {
                    $("#select").append(  //此处向select中循环绑定数据
                        "<option value="+item.class_id+">" + item.class_name+ "</option>");
                });
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            },
        })
    }

</script>
<body>
<div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
    <div class="nano">
        <div class="nano-content">
            <ul>
                <div class="logo"><a href="index.jsp"><span>教务管理系统后台</span></a></div>
                <li class="label">Main</li>
                <%
                    if(request.getSession().getAttribute("identity")!=null){
                        int identity=(int)request.getSession().getAttribute("identity");
                        if(identity==3){
                %>
                <li><a class="sidebar-sub-toggle"><i class="ti-home"></i>用户管理 <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                    <ul>
                        <li><a href="allUser.jsp">查看所有用户</a></li>
                    </ul>
                </li>
                <li><a class="sidebar-sub-toggle"><i class="ti-bar-chart-alt"></i>教师管理 <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                    <ul>
                        <li><a href="allTeacher.jsp">查看所有教师</a></li>
                    </ul>
                </li>
                <li><a class="sidebar-sub-toggle"><i class="ti-home"></i>场地管理 <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                    <ul>
                        <li><a href="allPlace.jsp">查看所有场地</a></li>
                    </ul>
                </li>
                <li><a class="sidebar-sub-toggle"><i class="ti-bar-chart-alt"></i>班级管理 <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                    <ul>
                        <li><a href="allClass.jsp">查看所有班级</a></li>
                    </ul>
                </li><%
            }
            else{%>
                <li><a class="sidebar-sub-toggle"><i class="ti-bar-chart-alt"></i>课程管理 <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                    <ul>
                        <li><a href="allCourse.jsp">查看所有课程</a></li>
                    </ul>
                </li>
                <li><a class="sidebar-sub-toggle"><i class="ti-bar-chart-alt"></i>上课管理 <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                    <ul>
                        <li><a href="allStudent.jsp">查看签到情况</a></li>
                    </ul>
                </li><%
                }
            }
            else{
            %>
                <a href="<%=request.getContextPath()%>/enter">请登录</a>
                <a href="<%=request.getContextPath()%>/register">免费注册</a><%
                }
            %>

            </ul>
        </div>
    </div>
</div>
<div class="header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="dropdown dib">
                    <div class="header-icon" data-toggle="dropdown">
								<span class="user-avatar"><%=request.getSession().getAttribute("userid") %>

                                </span>
<%--                        <div class="drop-down dropdown-profile dropdown-menu dropdown-menu-right">--%>
<%--                            <div class="dropdown-content-body">--%>
<%--                                <ul>--%>
<%--                                    <li>--%>
<%--                                        <a href="#">--%>
<%--                                            <i class="ti-settings"></i>--%>
<%--                                            <span>Setting</span>--%>
<%--                                        </a>--%>
<%--                                    </li>--%>
<%--                                    <li>--%>
<%--                                        <a href="<%=request.getContextPath() %>/exit">--%>
<%--                                            <i class="ti-power-off"></i>--%>
<%--                                            <span>Logout</span>--%>
<%--                                        </a>--%>
<%--                                    </li>--%>
<%--                                </ul>--%>
<%--                            </div>--%>
<%--                        </div>--%>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="content-wrap">
    <div class="main">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-8 p-r-0 title-margin-right">
                    <div class="page-header">
                        <div class="page-title">
                            <h1>Hello, <span>There are all courses.</span></h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="card">
                <div class="card-title pr">
                    <h4>所有查找结果</h4>
                </div>
                <div>
                    <select id="select">
                        <option value="-1">--请选择--</option>
                    </select>
                    <button class="btn btn-primary" type="submit" onclick="searchcourse()">搜索</button>
                    <a href="#" class="btn btn-default"
                       data-toggle="modal" data-target="#kechengList" onclick="getCourseTable()">课程表
                    </a>
                </div>


                <!-- 课程表对话框 -->
                <div class="modal fade" id="kechengList" tabindex="-1"
                     role="dialog" aria-labelledby="myModalLabel" style="border-color: red">
                    <div class="modal-dialog-centered" role="document" style="border-color: #0C88E8">
                        <div class="modal-content" style="width: 1200px;">
                            <div class="modal-body">
                                <div class="table-div">
                                    <h2 style="text-align: center;">课程表</h2>
                                    <table class="table table-bordered table-striped table-hover" style="height: 450px;width: 800px">
                                        <thead>
                                        <tr>
                                            <th scope="col"></th>
                                            <th scope="col">星期一</th>
                                            <th scope="col">星期二</th>
                                            <th scope="col">星期三</th>
                                            <th scope="col">星期四</th>
                                            <th scope="col">星期五</th>
                                            <th scope="col">星期六</th>
                                            <th scope="col">星期日</th>
                                        </tr>
                                        </thead>

                                        <tbody style="text-align: center;">
                                        <tr style="height: 80px">
                                            <th scope="row">9:00-10:30
                                            </th>
                                            <td id="table_1_1"></td>
                                            <td id="table_2_1"></td>
                                            <td id="table_3_1"></td>
                                            <td id="table_4_1"></td>
                                            <td id="table_5_1"></td>
                                            <td id="table_6_1"></td>
                                            <td id="table_7_1"></td>

                                        </tr>
                                        <tr style="height: 80px">
                                            <th scope="row">13:00-14:30
                                            </th>
                                            <td id="table_1_2"></td>
                                            <td id="table_2_2"></td>
                                            <td id="table_3_2"></td>
                                            <td id="table_4_2"></td>
                                            <td id="table_5_2"></td>
                                            <td id="table_6_2"></td>
                                            <td id="table_7_2"></td>
                                        </tr>
                                        <tr style="height: 80px">
                                            <th scope="row">15:00-16:30
                                            </th>
                                            <td id="table_1_3"></td>
                                            <td id="table_2_3"></td>
                                            <td id="table_3_3"></td>
                                            <td id="table_4_3"></td>
                                            <td id="table_5_3"></td>
                                            <td id="table_6_3"></td>
                                            <td id="table_7_3"></td>
                                        </tr>
                                        <tr style="height: 80px">
                                            <th scope="row">18:00-19:30
                                            </th>
                                            <td id="table_1_4"></td>
                                            <td id="table_2_4"></td>
                                            <td id="table_3_4"></td>
                                            <td id="table_4_4"></td>
                                            <td id="table_5_4"></td>
                                            <td id="table_6_4"></td>
                                            <td id="table_7_4"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 课程表对话框end -->

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table student-data-table m-t-20">
                            <thead>
                            <tr>
                                <th>课程ID</th>
                                <th>课程星期</th>
                                <th>课程时间</th>
                            </tr>
                            </thead>
                            <tbody id="courselist">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="loginBox">
    <div class="login-item">姓名：<input  type="text" id="InputTeachername" placeholder="姓名" /></div>
    <div class="login-item">密码：<input  type="text" id="InputTeacherPwd" placeholder="密码"/></div>
    <div class="login-item">照片地址：<input  type="text" id="InputTeacherPhoto" placeholder="照片地址"/></div>
    <div class="login-item">简介：<input  type="text" id="InputTeacherIntroduction" placeholder="简介"/></div>
    <div class="login-item"><a href="javascript:;" onclick="coursemodify()">修改</a></div>
</div>
<div id="deleteBox">
    <p>确定要删除该用户吗？</p>
    <div class="login-item"><input type="hidden" id="ID" /></div>
    <div class="delete-item div-inline"><a href="javascript:;" onclick="coursedelete()">确认</a></div>
    <div class="delete-item div-inline"><a href="javascript:;" onclick="cancel()">取消</a></div>
</div>
<script src="assets/js/lib/jquery.min.js"></script>
<script src="assets/js/lib/jquery.nanoscroller.min.js"></script>
<script src="assets/js/lib/menubar/sidebar.js"></script>
<script src="assets/js/lib/preloader/pace.min.js"></script>
<script src="assets/js/lib/bootstrap.min.js"></script>
<script src="assets/js/lib/circle-progress/circle-progress.min.js"></script>
<script src="assets/js/lib/circle-progress/circle-progress-init.js"></script>
</body>
</html>